<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>电商搜索页面</title>  
    <link rel="stylesheet" href="styles.css">  
	<style type="text/css">
		body, html {  
		    margin: 0;  
		    padding: 0;  
		    font-family: Arial, sans-serif;  
		}  
		  
		.search-container {  
		    display: flex;  
		    flex-direction: column;  
		    align-items: center;  
		    padding: 20px;  
		    width: 100%;  
		    max-width: 600px;  
		    margin: 0 auto;  
		    box-shadow: 0 0 10px rgba(0,0,0,0.1);  
		    border-radius: 8px;  
		    margin-top: 50px;  
		}  
		  
		#searchInput {  
		    width: 100%;  
		    padding: 10px;  
		    font-size: 16px;  
		    border: 1px solid #ccc;  
		    border-radius: 4px;  
		    margin-bottom: 10px;  
		}  
		  
		.recommendations-container {  
		    width: 100%;  
		    background-color: #f9f9f9;  
		    border: 1px solid #ddd;  
		    display: none; /* 初始不显示推荐 */  
		}  
		  
		.recommendation {  
		    padding: 8px;  
		    border-bottom: 1px solid #eee;  
		    cursor: pointer;  
		}  
		  
		.recommendation:last-child {  
		    border-bottom: none;  
		}  
		  
		.recommendation:hover {  
		    background-color: #e9e9e9;  
		}	
	</style>
</head>  
<body>  
    <div class="search-container">  
        <input type="text" id="searchInput" placeholder="搜索商品...">  
        <div id="searchRecommendations" class="recommendations-container">  
            <!-- 搜索推荐将通过JavaScript动态插入 -->  
        </div>  
    </div>  
  
    <script src="script.js"></script>  
</body>  
</html>
<script>
	document.getElementById('searchInput').addEventListener('input', function(event) {  
	    const searchTerm = event.target.value;  
	    const recommendationsContainer = document.getElementById('searchRecommendations');  
	  
	    // 清空旧的推荐  
	    recommendationsContainer.innerHTML = '';  
	  
	    // 根据输入模拟推荐（这里只是静态数据）  
	    if (searchTerm.length > 0) {  
	        const recommendations = [  
	            '推荐商品1 - ' + searchTerm,  
	            '推荐商品2 - ' + searchTerm,  
	            '推荐商品3 - ' + searchTerm  
	        ];  
	  
	        recommendations.forEach(recommendation => {  
	            const div = document.createElement('div');  
	            div.classList.add('recommendation');  
	            div.textContent = recommendation;  
	            recommendationsContainer.appendChild(div);  
	        });  
	  
	        // 显示推荐区域  
	        recommendationsContainer.style.display = 'block';  
	    } else {  
	        // 如果没有输入，隐藏推荐区域  
	        recommendationsContainer.style.display = 'none';  
	    }  
	});
</script>